import React,{useState,useEffect} from 'react'
import {Table,Button,Modal,Tree}from 'antd'
import {DeleteOutlined, ExclamationCircleOutlined, EditOutlined} from '@ant-design/icons'
import axios from 'axios'
const { confirm } = Modal;
export default function RoleList() {
    const [roleData, setRoleData] = useState([]);
    const [rightList, setrightList] = useState([]);
    const [currentId, setcurrentId] = useState(0);
    const [currentRight, setcurrentRight] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    useEffect(() => {
        axios.get('/roles').then(res=> setRoleData(res.data));
    }, [])
    useEffect(() => {
        axios.get('/rights?_embed=children').then(res=>setrightList(res.data));
    }, [])
    const handleOk=()=>{
        setIsModalVisible(false);
        //修改datasource
        const newRoleData = roleData.map(item=>{
            if(item.id===currentId){
                return{
                    ...item,
                    rights:currentRight
                }
            }
            return item
        })
        setRoleData(newRoleData);
        /**
         * 把roledata的每个角色遍历一次，找到与当前id一样的角色。
         * 修改改角色的rights属性，其余属性不变
         */
        //修改后端
        axios.patch(`/roles/${currentId}`,{
            rights:currentRight
        })
    }
    const handleCancel=()=>{
        setIsModalVisible(false);
    }
    const onCheck=(item)=>{
        /** 
        2-3    
        console.log(item)
            为勾选/取消勾选后的项 
        */
        setcurrentRight(item.checked);
    }
    const columns = [
        {
            title: 'id',
            dataIndex: "id",
            render(id) {
                return <b>{id}</b>
            },
        },
        {
            title:'roleName',
            dataIndex:'roleName'
        },
        {
            title:'操作',
            render(item){
                return <div>
                    <Button shape="circle" type="primary" icon={<EditOutlined/>}
                    onClick={()=>{setIsModalVisible(true);setcurrentRight(item.rights);setcurrentId(item.id)}} />  
                   {/*  1、2-2*/}
                    <Button shape="circle" type="primary" danger icon={<DeleteOutlined/>} 
                    onClick={()=>comfirmDelete(item)}  />
                </div>
            }
        }
    ]
    const comfirmDelete=(item)=>{
        confirm({
          title: '确认',
          icon: <ExclamationCircleOutlined />,
          content: '是否删除改权限？',
          okText: '是',
          okType: 'danger',
          cancelText: '否',
          onOk() {
            let newRoleData =roleData.filter(data=>data.id!==item.id)
            setRoleData(newRoleData);
            axios.delete(`/roles/${item.id}`)
          },
        });
      } 
    return (
        <div>
            <Table columns={columns} dataSource={roleData} rowKey={item=>item.id} pagination={{pageSize:5}}></Table>
            <Modal title="控制权限" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            {/* 1.点按钮时，修改isModalVisible的状态，控制model组件的显示 */}
            <Tree
                checkable
                checkedKeys={currentRight}
                onCheck={onCheck}
                treeData={rightList}
                checkStrictly={true}
                />
                {/* 2.checkedKey    勾选的项
                      onCheck       勾选或取消的回调
                      treeData      显示的项
                      
                      2-1先获取treedata。通过点击按钮，触发函数，在函数中发送请求，再调用setRightList改变状态，显示所有项。
                      2-2显示当前勾选的项。通过 checkedKeys={currentRight}控制
                            由之前提交知，点击按钮可以传入当前的项item给后续的函数。
                            所有当点击按钮显示model的同时，把当前的项传入item.rights赋值给currentRight

                */}
            </Modal>
        </div>
    )
}
